window.onload = function () {


    var MenuNew1 = 0;
    var MenuNew2 = 0;
    var oMain = this.document.getElementById('main');
    var oSideMenu = document.getElementById('side-menu');
    var oView = document.getElementById('view');
    //头部菜单效果
    var oHeaderMenu = document.getElementById('header-menu');
    var oHeaderNav = oHeaderMenu.getElementsByClassName("layui-top-nav")[0];
    var oHeaderNavLi = oHeaderNav.getElementsByTagName('li');
    var oHeaderBAar = oHeaderNav.getElementsByClassName('bar');

    //管理员效果
    var oNavItem = oHeaderMenu.getElementsByClassName('layui-nav-item')[0];
    var oNavChild = oNavItem.getElementsByClassName('nav-child')[0];

    //侧边栏效果
    var oSideMenu = document.getElementById('side-menu');
    var oSideNav = oSideMenu.getElementsByClassName('side-menu-nav')[0]
    var oSideNavUl = oSideNav.getElementsByTagName('ul')[0];
    var oSideBar = document.getElementsByClassName('side-bar');
    var oSideMenuLi = oSideMenu.getElementsByTagName('li');

    //视图区
    var oView = document.getElementById('view');

    var oViewIframe = oView.getElementsByTagName('iframe')[0];
    for (var i = 0; i < oHeaderNavLi.length; i++) {
        oHeaderNavLi[i].inder = i;
    }
    for (var i = 0; i < oHeaderNavLi.length; i++) {
        oHeaderNavLi[i].onmouseover = function () {

            startMove(oHeaderBAar[0], 'left', this.inder * 100, 5);
        }

        oHeaderNavLi[i].onclick = function () {
            MenuNew1 = this.inder;
            startMove(oHeaderBAar[1], 'opacity', 100, 16);
            oHeaderBAar[1].style.left = this.inder * 100 + 'px';
            startMove2(oSideNavUl, {left: -this.inder * 200}, 8)

        }
    }
    oHeaderNav.onmouseover = function () {
        var attr = {
            width: 100,
            opacity: 100

        };
        startMove2(oHeaderBAar[0], attr, 12);
    }
    oHeaderNav.onmouseout = function () {
        var attr = {
            width: 0,
            opacity: 0
        };
        startMove2(oHeaderBAar[0], attr, 12);
    }

    //管理员效果

    oNavItem.onmouseover = function () {
        oNavChild.style.display="block";
        var att = {
            opacity: 100,
            top: 62
        }
        startMove2(oNavChild, att, 8);
    }
    oNavItem.onmouseout = function () {
        var att = {
            opacity: 0,
            top: 125
        }
        startMove2(oNavChild, att, 8,function () {
            oNavChild.style.display="none";
        });
    }


    //侧边栏效果
    var a = new Array();
    for (var i = 0; i < oSideMenuLi.length; i++) {
        a[i] = oSideMenuLi[i].getElementsByTagName('a');
        for (var x = 0; x < a[i].length; x++) {
            a[i][x].inder = x;
        }
    }

    for (var i = 0; i < a.length; i++) {
        for (var x = 0; x < a[i].length; x++) {
            a[i][x].onmouseover = function () {
                startMove(oSideBar[1], 'top', this.inder * 45, 5);
            }
            a[i][x].inder = x;
            a[i][x].onclick = function () {
                MenuNew2 = this.inder;
                oSideBar[0].style.opacity = 1;
                oSideBar[0].style.top = this.inder * 45 + "px";
                tab(MenuNew1, MenuNew2);
            }
        }


        oSideMenuLi[i].onmouseover = function () {
            var attr = {
                height: 45,
                opacity: 100

            };
            startMove2(oSideBar[1], attr, 12);
        }
        oSideMenuLi[i].onmouseout = function () {
            var attr = {
                height: 0,
                opacity: 0
            };
            startMove2(oSideBar[1], attr, 12);
        }


    }

    /*
    * 函数功能：切换视图层的显示页面
    * 参数：第一个参数：头部点击的标记，第二个参数：侧边栏点击的标记
    * 返回值：无
    * */
    function tab(headerNumder, sideNumder) {
        var routes = [["/blog/private/subpage/overview.html"], ["/blog/private/subpage/blogEditor.html", "/blog/private/subpage/AllPost.html", "/Blog/private/subpage/postComment.html"], ["/blog/private/subpage/addUser.html", "/blog/private/subpage/allUser.html"], ["/Blog/private/subpage/set.html", "/blog/private/subpage/set.html", "/blog/private/subpage/set.html", "/blog/private/subpage/set.html", "/blog/private/subpage/set.html"]];
        oViewIframe.src = routes[headerNumder][sideNumder];
    }


}